<template>
	<view class="content">
		<view class="user-con align-center _flex_row">
			<image :src="staffInfo.image" mode="aspectFill"></image>
			<view class="user-info">
				<view class="user-name">
					{{staffInfo.name}}
				</view>
				<view class=" _flex_row shop-info">
					<view class="rank align-center">
						{{staffInfo.empType}}
					</view>
					<view class="num align-center" v-if="staffInfo.orderNum == null">
						已约:0
					</view>
					<view class="num align-center" v-else>
						已约:{{staffInfo.orderNum}}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="navbar">
				<view
					v-for="(item, index) in shopTimeList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index,item.dayOfWeek,item.localDate)"
				>
					<view class="nav-text" v-if="item.dayOfWeek == 'MONDAY'">
						周一
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'TUESDAY'">
						周二
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'WEDNESDAY'">
						周三
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'THURSDAY'">
						周四
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'FRIDAY'">
						周五
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'SATURDAY'">
						周六
					</view>
					<view class="nav-text" v-if="item.dayOfWeek == 'SUNDAY'">
						周日
					</view>
					<view class="nav-time">
						{{item.localDate}}
					</view>
				</view>
			</view>
			<view class="time-con">
				<view class="mor-con">
					<view class="text">
						上午
					</view>
					<view class="list-con">
					<view class="time-list">
							<view class="list-item"  :class="{
								checked:checked1 == index,
								reservate:time1.book == false && time1.orderBook == true,
								timeout:time1.book == false && time1.orderBook == false}" 
								@tap="choose1(index,time1.time,time1.book,time1.orderBook)" 
								v-for="(time1, index) in businessTimeList.morningTimes" 
								:key="index">
								<view class="" v-if="time1.orderBook == false">
									{{time1.time}}
								</view>
								<view class="" v-if="time1.orderBook == true">
									已约
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mor-con">
					<view class="text">
						下午
					</view>
					<view class="time-list">
						<view class="list-item" :class="{ 
							checked:checked2 == index,
							reservate:time2.book == false && time2.orderBook == true,
							timeout:time2.book == false && time2.orderBook == false}"
							 @tap="choose2(index,time2.time,time2.book,time2.orderBook)" 
							 v-for="(time2, index) in businessTimeList.afternoonTimes"
							 :key="index">
							 <view class="" v-if="time2.orderBook == false">
							 	{{time2.time}}
							 </view>
							 <view class="" v-if="time2.orderBook == true">
							 	已约
							 </view>
						</view>
					</view>
				</view>
				<view class="mor-con">
					<view class="text">
						晚上
					</view>
					<view class="time-list">
						<view class="list-item" :class="{ 
							checked:checked3 == index,
							reservate:time3.book == false && time3.orderBook == true,
							timeout:time3.book == false && time3.orderBook == false}"
							 @tap="choose3(index,time3.time,time3.book,time3.orderBook)" 
							 v-for="(time3, index) in businessTimeList.nightTimes" 
							 :key="index">
							 <view class="" v-if="time3.orderBook == false">
							 	{{time3.time}}
							 </view>
							 <view class="" v-if="time3.orderBook == true">
							 	已约
							 </view>
						</view>
					</view>
				</view>
				<view class="next" @tap="showProduct" data-target="ChooseModal">
					<button class="next1" :disabled="disabled1">下一步</button>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalShow?'show':''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="top">
						<view class="date"> 预约日期 </view>
						<image class="close" src="../../../static/images/close.png" @tap="hideModal('product')"></image>
					</view>
					<view class="time"> 
						{{day}}    
						 <text class="nav-text" v-if="week == 'MONDAY'">
							周一
						 </text>
						 <text class="nav-text" v-if="week == 'TUESDAY'">
							周二
						 </text>
						 <text class="nav-text" v-if="week == 'WEDNESDAY'">
							周三
						 </text>
						 <text class="nav-text" v-if="week == 'THURSDAY'">
							周四
						 </text>
						 <text class="nav-text" v-if="week == 'FRIDAY'">
							周五
						 </text>
						 <text class="nav-text" v-if="week == 'SATURDAY'">
							周六
						 </text>
						 <text class="nav-text" v-if="week == 'SUNDAY'">
							周日
						 </text>
						{{time}} 
					</view>
				</view>
				<view class="title">
					选择预约服务
				</view>
				<view class="grid col-3 padding-sm service-con">
					<view v-for="(item,index) in employeeList" class="padding-xs service-item" :key="index">
						<button class="cu-btn block" :class="{ red:checked4 == index}" @tap="choose4(index,item.id,item.name,item.price)"> 
							{{item.name}}
						</button>
					</view>
				</view>
				<view class="next" @tap="showPay" data-target="RadioModal">
					<button class="next2" :disabled="disabled2">下一步</button>
				</view>
			</view>
		</view>
		<!-- :class="modalShow?'show':''"    :class="modalName=='RadioModal'?'show':''" -->
		<view class="cu-modal" :class="modalShow1?'show':''">
			<view class="cu-dialog pay-con" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="top">
						<view class="date"> 预约支付 </view>
						<image class="close" src="../../../static/images/close.png" @tap="hideModal('toPay')"></image>
					</view>
					<view class="time">{{productName}}</view>
				</view>
				<view class="payment">
					<view class="title">
						支付金额
					</view>
					<view class="money">
						￥{{productPrice}}
					</view>
				</view>
				<view class="title1">
					选择预约服务
				</view>
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" @click="changePayType('wxpay')">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">微信支付</view>
								<radio class="round" :checked='payType == "wxpay"'></radio>
							</label>
						</view>
						<view class="cu-item" @click="changePayType('card')">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">会员卡支付</view>
								<radio class="round" :checked='payType == "card"'></radio>
							</label>
						</view>
					</view>
				</radio-group>
				<view class="card" v-if='payType == "card"'>
					<view class="no-list" v-if='productCardList == null'>
						<image class="technician-avatar1" src="../../../static/images/no_order.png"></image>
						<text>暂无会员卡~</text>
					</view>
					<view class="card2"  :key="index" v-else>
						<view class="top">
							<view class="text">
								{{productCardList.type}}
							</view>
							<image src="../../../static/images/vip1.png" mode="aspectFill"></image>
						</view>
						<view class="middle">
							{{productCardList.name}}<text>/1节</text>
						</view>
						<view class="bottom">
							<view class="text1">
								{{productCardList.shopName}}
							</view>
							<view class="time">
							{{cardTime}} 过期
							</view>
						</view>
					</view>
				</view>
				<view class="next" @tap="toPay()">
					<button class="next3" :disabled="disabled3">确认支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {showStaffInfoById,showshopTime,businessTime,employeeList,getCard,muiWxPay,addOrder,toPay,vipCardPay} from '@/api/index.js';
	import config from '@/config/index';
	import tuiModal from "@/components/modal/modal"//弹窗
	export default {
		components: {
			tuiModal,
		},
		data() {
			return {
				staffId:null,//员工id
				shopId:null,//员工所属店铺id
				staffInfo:{},//员工信息
				shopTimeList:[],//获取时间表
				businessTimeList:{},//工作时间
				day:null,//日期
				week:null,//星期
				time:null,//时间
				employeeList:[],//员工服务的所有产品
				productCardList:{},//会员卡列表
				productId:null,//产品id
				productName:null,//产品名称
				productPrice:null,//产品价格
				transactionId:null,//商户订单号
				subject:'服务内容',//服务内容
				payType: 'wxpay',
				modalName: null,
				radio: 'radio1',
				TabCur: 0,
				scrollLeft: 0,
				tabCurrentIndex: 0,
				checked1:null,
				checked2:null,
				checked3:null,
				checked4:0,
				orderId:null,//订单id
				modalShow:false,//产品框
				modalShow1:false,//支付框
				purchaseRecordId:null,//id
				cardId:null,//会员卡id
				cardShow:false,//会员卡显示或隐藏
				disabled1:false,//第一个按钮是否禁止
				disabled2:false,
				disabled3:false,
				disabled4:false,
				timeList1:[],
				cardTime:null,
			}
		},
		onShow() {
		},
		onLoad(options) {
			let _that = this
			_that.staffId = options.id
			this.showStaffInfo()
		},
		methods: {
			//字段截取
			
			str(value){
				return value.replace(value.substring(0,value.length-3))
			},
			//超过当前时间
			timeOut(){
				this.$api.msg('当前时间不可预约');
			},
			//显示服务产品
			showProduct(){
				console.log("产品显示"+this.day,this.week,this.time)
				let _that = this
				if(_that.time == null){
					this.$api.msg('请选择预约时间');
				}else{
					_that.modalShow = true
					_that.checked4 = 0
					_that.getEmployeeList()
				}
			},
			//显示支付框
			showPay(){
				let _that = this
				if(_that.productName == null){
					this.$api.msg('请选择预约服务');
				}else{
					_that.modalShow1 = true
					this.addOrder()
					this.getProductCardList()
				}
			},
			//添加订单
			addOrder(){
				let _that = this
				this.disabled2 = true
				addOrder(_that.staffId,_that.productId,_that.shopId,_that.day.concat(' ',_that.time.slice(0,5))).then(re =>{
					_that.transactionId = re.transactionId
					_that.orderId = re.id
					this.disabled2 = false
				}).catch(re=>{
					this.disabled3 = true
				});
			},
			toPay(){
				if(this.payType == 'wxpay'){
					this.wxPay()
				}else{
					this.vipCardPay()
				}
			},
			//微信支付
			wxPay(){
				let _that = this
				toPay(_that.orderId,2).then(re =>{
					uni.requestPayment({
						provider: 'wxpay',
						// appId: re.appid,
						timeStamp: re.timeStamp,
						nonceStr: re.nonceStr,
						package: re.package,
						signType: 'MD5',
						paySign: re.paySign,
						success: function (res) {
							uni.navigateTo({
								url: 'submit_review'
							});
						},
						fail: function (err) {
							this.disabled3 = false
						}
					});
				}).catch(re=>{
					console.log(re);
				});
			},
			//会员卡支付
			vipCardPay(){
				let _that = this
				if(_that.purchaseRecordId == null || _that.purchaseRecordId == '' || _that.purchaseRecordId == undefined){
					this.$api.msg('没有会员卡可支付');
					return false
				}
				vipCardPay(_that.orderId,_that.purchaseRecordId).then(re =>{
					uni.navigateTo({
						url: 'submit_review'
					});
				}).catch(re=>{
					console.log(re);
				});
			},
			//支付查询用户下是否有会员卡
			getProductCardList(){
				let _that = this
				getCard(_that.productId,_that.shopId).then(re =>{
					_that.productCardList = re
					_that.purchaseRecordId = re.purchaseRecordId
					_that.cardId = re.cardId
					_that.cardTime = re.expireDate.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				}).catch(re=>{
					console.log(re);
				});
			},
			//获取员工服务的所有产品
			getEmployeeList(){
				let _that = this
				this.disabled1 = true
				employeeList(_that.staffId,_that.shopId).then(re =>{
					this.disabled1 = false
					_that.employeeList = re
					_that.productId = _that.employeeList[0].id
					_that.productName = _that.employeeList[0].name
					_that.productPrice = _that.employeeList[0].price
				}).catch(re=>{
					console.log(re);
				});
			},
			//根据id查询员工
			showStaffInfo(){
				let _that = this
				showStaffInfoById(_that.staffId).then(re =>{
					_that.staffInfo = re
					_that.shopId = re.shopId
					_that.getShopTimeList()
				}).catch(re=>{
					console.log(re);
				});
			},
			//营业时间列表
			getShopTimeList(){
				let _that = this
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				showshopTime(_that.staffId,_that.shopId).then(re =>{
					uni.hideLoading();
					_that.shopTimeList = re
					_that.businessTimeList = _that.shopTimeList[0].shopSchedule
					_that.businessTimeList.morningTimes.map((v,i)=>{
						_that.$set(v,'time',v.time.substring(0,5))
					})
					_that.businessTimeList.afternoonTimes.map((v,i)=>{
						_that.$set(v,'time',v.time.substring(0,5))
					})
					_that.businessTimeList.nightTimes.map((v,i)=>{
						_that.$set(v,'time',v.time.substring(0,5))
					})
					if(_that.day == null){
						_that.day = _that.shopTimeList[0].localDate
					}
					_that.week = _that.shopTimeList[0].dayOfWeek
				}).catch(re=>{
					console.log(re);
				});
			},
			//顶部tab点击
			tabClick(index,day,time){
				console.log("tab"+index,day,time)
				this.week = day
				this.day = time
				this.checked1 = null;
				this.checked2 = null;
				this.checked3 = null;
				this.tabCurrentIndex = index;
				if(this.tabCurrentIndex == 0){
					let _that = this
					_that.day = _that.shopTimeList[0].localDate
					this.getShopTimeList()
					this.day = time
				}else{
					let _that = this
					this.day = time
					uni.showLoading({
						title: '加载中',
						mask:true
					})
					businessTime(_that.staffId,_that.shopId,time).then(re =>{
						uni.hideLoading();
						_that.businessTimeList = re
						_that.businessTimeList.morningTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
						_that.businessTimeList.afternoonTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
						_that.businessTimeList.nightTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
					}).catch(re=>{
						console.log(re);
					});	
				}
			},
			// 弹窗
			// showModal(e) {
			// 	this.modalName = e.currentTarget.dataset.target
			// 	if(this.modalName == 'RadioModal'){
			// 		this.addOrder()
			// 		this.getProductCardList()
			// 	}
			// },
			hideModal(e) {
				console.log("隐藏产品"+this.day,this.week,this.time)
				let _that = this
				if(e == 'product'){
					_that.modalShow = false
					// _that.day = null
					// _that.week = null
					_that.time = null
				}else if(e == 'toPay'){
					_that.modalShow = false
					_that.modalShow1 = false
				}else{
					this.modalShow = false
					_that.modalShow1 = false
					this.modalName = null
				}
				if(_that.tabCurrentIndex == 0){
					_that.day = _that.shopTimeList[0].localDate
					_that.getShopTimeList()
				}else{
					businessTime(_that.staffId,_that.shopId,_that.day).then(re =>{
						_that.businessTimeList = re
						_that.businessTimeList.morningTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
						_that.businessTimeList.afternoonTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
						_that.businessTimeList.nightTimes.map((v,i)=>{
							_that.$set(v,'time',v.time.substring(0,5))
						})
					}).catch(re=>{
						console.log(re);
					});	
				}
				_that.checked1 = null;
				_that.checked2 = null;
				_that.checked3 = null;
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				if(type=="card"){
					this.cardShow == false
				}else{
					this.cardShow == true
				}
			},
			choose1:function(index,time,book,orderBook){
				console.log("上午"+this.day,this.week,this.time)
				if(book == false && orderBook == true){
					this.$api.msg('当前时间不可预约');
				}else if(book == false && orderBook == false){
					this.$api.msg('当前时间不可预约');
				}else{
					this.checked1 = index;
					this.checked2 = null;
					this.checked3 = null;
					this.time = time
				}
			},
			choose2:function(index,time,book,orderBook){
				console.log("中午"+this.day,this.week,this.time)
				if(book == false && orderBook == true){
					this.$api.msg('当前时间不可预约');
				}else if(book == false && orderBook == false){
					this.$api.msg('当前时间不可预约');
				}else{
					this.checked1 = null;
					this.checked2 = index;
					this.checked3 = null;
					this.time = time
				}
			},
			choose3:function(index,time,book,orderBook){
				console.log("下午"+this.day,this.week,this.time)
				if(book == false && orderBook == true){
					this.$api.msg('当前时间不可预约');
				}else if(book == false && orderBook == false){
					this.$api.msg('当前时间不可预约');
				}else{
					this.checked1 = null;
					this.checked2 = null;
					this.checked3 = index;
					this.time = time
				}
			},
			choose4:function(index,id,name,price){
				this.checked4 = index;
				this.productId = id
				this.productName = name
				this.productPrice = price
			},
		}
	}
</script>

<style lang="scss">
	page{background: #fff!important;}
	.no-list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.no-list image{
		height: 280rpx;
		width:280rpx;
	}
	.no-list text{
		color: #999;
		margin-top: -20rpx;
	}
	//已约
	.reservate{
		background-color: #CAFFE9!important;
		color: #03B76A!important;
		// background-color: #FFEEB6!important;
		// color: #F28007!important;
	}
	//已超过当前时间
	.timeout{
		color: #BFBFBF!important;
	}
	.user-con{
		margin-left:26rpx;
		height:216rpx;
		position: fixed;
		background: #fff;
		width: 100%;
		z-index: 999;
	}
	.user-con image{
		width:140rpx;
		height: 140rpx;
		border-radius: 140rpx;
		border:2px solid #F5F5F5;
	}
	.user-info{
		margin-left:20rpx;
	}
	.user-name{
		color: #3E3E3E;
		font-size: 36rpx;
		font-weight: 600;
	}
	.shop-info{
		margin-top:16rpx;
	}
	.rank{
		color: #FF203B;
		background: #FEEAF3;
		width:136rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 22rpx;
		height: 40rpx;
		line-height: 44rpx;
	}
	.num{
		background-color: #CAFFE9!important;
		color: #03B76A!important;
		width:136rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 22rpx;
		height: 40rpx;
		line-height: 44rpx;	
		margin-left:28rpx;
	}
	.navbar{
		display: flex;
		height:80rpx;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: fixed;
		top:216rpx;
		width:100%;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 20upx;
			font-weight: normal;
			color: #333;
			position: relative;
			.nav-text{
				font-size: 28rpx;
			}
			.nav-time{
				font-size: 18rpx;
				color: #BFBFBF;
				margin-top:4rpx;
			}
			&.current{
				.nav-time{
					color: #FF203B!important;
				}
				color: #FF203B!important;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #FF203B!important;
				}
			}
		}
	}
	/*  #ifdef H5 */
	.navbar{
		top:306rpx;
	}
	/*  #endif  */
	/* tab颜色 */
	.nav{
		background: #fff;
	}
	.text-orange, .line-orange, .lines-orange{
		color:#FF0000;
	}
	.nav .cu-item{
		font-size: 28rpx;
		height:80rpx;
	}
	/*时间选择*/
	.list-con{
		display: flex;
		text:center;
	}
	.time-list{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.time-con .text{
		padding:0 28rpx 28rpx 28rpx;
		color: #BFBFBF;
		font-size: 24rpx;
	}
	.time-con{
		display: flex;
		flex-direction: column;
		padding-top: 326rpx;
	}
	.list-item{
		height: 60rpx;
		width:120rpx;
		border-radius: 30rpx;
		color: #3E3E3E;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
		margin:0 28rpx 28rpx;
		background: #F5F5F5;
	} 
	.checked{
		background: url("../../../static/images/yuyue.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}
	.contracted{
		color: #03B76A;
		background: #CAFFE9;
	}
	.next{
		margin:0 76rpx;
	}
	.next .next2{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:46rpx auto;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 74rpx;
	}
	.next .next3{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:46rpx auto;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.next .next1{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:46rpx auto;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.next button:after{
		border:0;
	}
	//对话框
	.cu-modal{
		text-align: left;
	}
	.cu-dialog{
		height:1012rpx;
		background: #fff;
	}
	.cu-bar{
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #EEEEEE
	}
	.cu-bar .close{
		width:50rpx;
		height:50rpx;
		margin-right:24rpx ;
	}
	.cu-bar .top{
		display: flex;
		flex-direction: row;
		color: #BFBFBF;
		font-size: 24rpx;
		margin-top:24rpx;
		width:100%;
	}
	.date{
		display: flex;
		flex: 1;
		justify-content: center;
		margin-right: -74rpx;
	}
	.cu-bar .time{
		font-size: 28rpx;
		color: #3E3E3E;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.service-con{
		background: #fff;
	}
	.cu-dialog .title{
		color: #BFBFBF;
		font-size: 24rpx;
		padding:28rpx 0 0 28rpx;
		text-align: left;
	}
	.cu-dialog .title1{
		color: #BFBFBF;
		font-size: 24rpx;
		padding:0rpx 0 0 28rpx;
		text-align: left;
	}
	.cu-btn{
		height:60rpx;
		width:180rpx;
		border-radius: 30rpx;
	}
	.red{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}
	//支付窗口
	.pay-con{
		width:100%!important;
		vertical-align:bottom;
		border-radius: 0;
	}
	.card{
		margin:36rpx;
	}
	.card2{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:-60rpx!important;
		padding:0;
		width:100%;
		height: 380rpx;
		background: url(../../../static/images/vip.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.card .top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.card .top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.card .top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		text-align: center;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 50rpx;
		flex: 1;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.details{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		padding:0 36rpx;
		line-height: 100rpx;
	}
	.details .text{
		flex: 1;
	}
	.can-buy{
		background: #fff;
	}
	.can-buy .title{
		color: #424242;
		font-size: 28rpx;
		font-weight: 700;
		padding:24rpx 0 24rpx 36rpx;
		margin-top:16rpx;
	}
	.text1{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 0rpx 50rpx 50rpx;
		flex: 1;
	}
	.card .time{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 50rpx 50rpx 0;
	}
	.payment{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.payment .title{
		padding:40rpx 24rpx;
		font-size: 28rpx;
		color: #3E3E3E;
		flex: 1;
	}
	.payment .money{
		padding:30rpx;
		color: #F00617;
		font-size: 32rpx;
		font-weight: 600;
	}
</style>
